<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>设备管理</title>

<link href="/iagriculture/css/bootstrap.min.css" rel="stylesheet">
<link href="/iagriculture/font-awesome/css/font-awesome.css"
	rel="stylesheet">

<!-- Data Tables -->
<link
	href="/iagriculture/css/plugins/dataTables/dataTables.bootstrap.css"
	rel="stylesheet">
<link
	href="/iagriculture/css/plugins/dataTables/dataTables.responsive.css"
	rel="stylesheet">
<link
	href="/iagriculture/css/plugins/dataTables/dataTables.tableTools.min.css"
	rel="stylesheet">
<link href="/iagriculture/css/plugins/sweetalert/sweetalert.css"
	rel="stylesheet">
<link href="/iagriculture/css/animate.css" rel="stylesheet">
<link href="/iagriculture/css/style.css" rel="stylesheet">

</head>

<body>

	<div id="wrapper">

		<nav class="navbar-default navbar-static-side" role="navigation">
			<div class="sidebar-collapse">
				<ul class="nav metismenu" id="side-menu">
					<li class="nav-header">
						<div class="dropdown profile-element">
							<span> <img alt="image" class="img-circle"
								src="/iagriculture/img/profile_small.jpg" />
							</span> <a data-toggle="dropdown" class="dropdown-toggle" href="#">
								<span class="clear"> <span class="block m-t-xs"> <strong
										class="font-bold">David Williams</strong>
								</span> <span class="text-muted text-xs block">Art Director <b
										class="caret"></b></span>
							</span>
							</a>
							<ul class="dropdown-menu animated fadeInRight m-t-xs">
								<li><a href="profile.html">Profile</a></li>
								<li><a href="contacts.html">Contacts</a></li>
								<li><a href="mailbox.html">Mailbox</a></li>
								<li class="divider"></li>
								<li><a href="login.html">Logout</a></li>
							</ul>
						</div>
						<div class="logo-element">IN+</div>
					</li>
					<li><a href="/iagriculture/index/"><i
							class="fa fa-th-large"></i> <span class="nav-label">个人主页</span></a></li>
					<li><a href="/iagriculture/index/fazhi"><i
							class="fa fa-flask"></i> <span class="nav-label">数据管理</span></a></li>
					<li class="active"><a href="/iagriculture/index/shebei"><i
							class="fa fa-flask"></i> <span class="nav-label">设备管理</span></a></li>
					<li><a href="/iagriculture/index/light"><i
							class="fa fa-diamond"></i> <span class="nav-label">光照检测</span></a></li>
					<li><a href="/iagriculture/index/daqiya"><i
							class="fa fa-bar-chart-o"></i> <span class="nav-label">大气压检测</span></a></li>
					<li><a href="/iagriculture/index/shuifen"><i
							class="fa fa-envelope"></i> <span class="nav-label">土壤水分检测
						</span></a></li>
					<li><a href="/iagriculture/index/kqwendu"><i
							class="fa fa-pie-chart"></i> <span class="nav-label">空气温度检测</span>
					</a></li>
					<li><a href="/iagriculture/index/kqshidu"><i
							class="fa fa-pie-chart"></i> <span class="nav-label">空气湿度检测</span>
					</a></li>

					<li><a href="/iagriculture/index/yewei"><i
							class="fa fa-desktop"></i> <span class="nav-label">液位检测</span> </a></li>
					<li><a href="/iagriculture/index/yushui"><i
							class="fa fa-files-o"></i> <span class="nav-label">雨水检测</span></a></li>
				</ul>

			</div>
		</nav>

		<div id="page-wrapper" class="gray-bg">
			<div class="row border-bottom">
				<nav class="navbar navbar-static-top" role="navigation"
					style="margin-bottom: 0">
					<div class="navbar-header">
						<a class="navbar-minimalize minimalize-styl-2 btn btn-primary "
							href="#"><i class="fa fa-bars"></i> </a>
						<form role="search" class="navbar-form-custom"
							action="search_results.html">
							<div class="form-group">
								<input type="text" placeholder="Search for something..."
									class="form-control" name="top-search" id="top-search">
							</div>
						</form>
					</div>
					<ul class="nav navbar-top-links navbar-right">
						<li class="dropdown"><a class="dropdown-toggle count-info"
							data-toggle="dropdown" href="#"> <i class="fa fa-envelope"></i>
								<span class="label label-warning">1</span>
						</a>
							<ul class="dropdown-menu dropdown-messages">
								<li>
									<div class="dropdown-messages-box">
										<a href="profile.html" class="pull-left"> <img alt="image"
											class="img-circle" src="/iagriculture/img/a7.jpg">
										</a>
										<div class="media-body">
											<small class="pull-right">46h ago</small> <strong>Mike
												Loreipsum</strong> started following <strong>Monica Smith</strong>. <br>
											<small class="text-muted">3 days ago at 7:58 pm -
												10.06.2014</small>
										</div>
									</div>
								</li>
								<li class="divider"></li>
								<li>
									<div class="text-center link-block">
										<a href="mailbox.html"> <i class="fa fa-envelope"></i> <strong>Read
												All Messages</strong>
										</a>
									</div>
								</li>
							</ul></li>
						<li class="dropdown"><a class="dropdown-toggle count-info"
							data-toggle="dropdown" href="#"> <i class="fa fa-bell"></i> <span
								class="label label-primary">1</span>
						</a>
							<ul class="dropdown-menu dropdown-alerts">
								<li><a href="grid_options.html">
										<div>
											<i class="fa fa-upload fa-fw"></i> Server Rebooted <span
												class="pull-right text-muted small">4 minutes ago</span>
										</div>
								</a></li>
								<li class="divider"></li>
								<li>
									<div class="text-center link-block">
										<a href="notifications.html"> <strong>See All
												Alerts</strong> <i class="fa fa-angle-right"></i>
										</a>
									</div>
								</li>
							</ul></li>


						<li><a href="login.html"> <i class="fa fa-sign-out"></i>
								Log out
						</a></li>
					</ul>

				</nav>
			</div>
			<div class="row wrapper border-bottom white-bg page-heading">
				<div class="col-lg-9">
					<h2>设备管理</h2>
					<ol class="breadcrumb">
						<li><a href="index.html">主页</a></li>
						<li class="active"><strong>设备管理</strong></li>
					</ol>
				</div>
				<div class="col-lg-3" style="height: 80px"></div>
			</div>
			<div class="wrapper wrapper-content animated fadeInRight">
				<div class="row">
					<div class="col-lg-12">
						<div class="ibox float-e-margins">
							<div class="ibox-title">
								<h5>农场情景模式</h5>
								<div class="ibox-tools">
									<a class="collapse-link"> <i class="fa fa-chevron-up"></i></a>
									<a class="close-link"> <i class="fa fa-times"></i>
									</a>
								</div>
							</div>
							<div class="ibox-content">

								<table class="table" id="editable-farm">
									<thead>
										<tr>
											<th>id</th>
											<th>农场号</th>
											<th>农场名</th>
											<th>情景模式（0：手动 1：自动）</th>
											<th>操作</th>
											<th>状态检测</th>
										</tr>
									</thead>
									<tbody id="table-farm">
										<!-- 此处填充农场 -->
									</tbody>
								</table>

							</div>
						</div>
					</div>

				</div>
				<div class="row">
					<div class="col-lg-12">
						<div class="ibox float-e-margins">
							<div class="ibox-title">
								<h5>检测数据</h5>
								<div class="ibox-tools">
									<a class="collapse-link"> <i class="fa fa-chevron-up"></i></a>
									<a class="close-link"> <i class="fa fa-times"></i>
									</a>
								</div>
							</div>
							<div class="ibox-content">
								<div>
									<button type="button" id="loading-example-btn"
										class="btn btn-white btn-sm">
										<i class="fa fa-refresh"></i> 刷新
									</button>
									<b><font color="red">（提示：双击行删除设备）</font></b>
									<button type="button" class="btn btn-primary pull-right"
										data-toggle="modal" data-target="#myModal-dev">添加设备</button>
								</div>
								<table class="table table-striped table-bordered table-hover "
									id="editable">
									<thead>
										<tr>
											<th>id</th>
											<th>农场id</th>
											<th>设备号</th>
										</tr>
									</thead>
									<tbody id="table-dev">
										<!-- 此处填充数据 -->
									</tbody>
									<tfoot>
										<tr>
											<th>id</th>
											<th>farmId</th>
											<th>devNum</th>
										</tr>
									</tfoot>
								</table>

							</div>
						</div>
					</div>
				</div>

				<div class="row" id="dev-state">
					<!-- 此处填充 -->
				</div>
			</div>
			<div class="footer">
				<div class="pull-right">
					10GB of <strong>250GB</strong> Free.
				</div>
				<div>
					<strong>Copyright</strong> Example Company &copy; 2014-2015
				</div>
			</div>

		</div>
	</div>

	<!--start 模态窗 -->
	<div class="modal inmodal" id="myModal-dev" tabindex="-1" role="dialog"
		aria-hidden="true" style="display: none;">
		<div class="modal-dialog">
			<div class="modal-content animated flipInY">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title">添加农场</h4>
				</div>
				<div class="modal-body">
					<div class="form-group">
						<label>农场号 </label> <select id="select-farm"
							class="form-control col-md-12" name="account">
							<!-- 此处填充类型选择 -->
						</select>
					</div>
					<div class="form-group">
						<label>设备号</label> <input id="input-add-devNum"
							name="input-add-devNum" type="text"
							class="form-control required error" aria-required="true"
							aria-invalid="true">
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="btn-save-dev">保存</button>
				</div>
			</div>
		</div>
	</div>

	<!-- end 模态窗 -->


	<!-- Mainly scripts -->
	<script src="/iagriculture/js/jquery-2.1.1.js"></script>
	<script src="/iagriculture/js/bootstrap.min.js"></script>
	<script src="/iagriculture/js/plugins/metisMenu/jquery.metisMenu.js"></script>
	<script
		src="/iagriculture/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
	<script src="/iagriculture/js/plugins/jeditable/jquery.jeditable.js"></script>

	<!-- Data Tables -->
	<script src="/iagriculture/js/plugins/dataTables/jquery.dataTables.js"></script>
	<script
		src="/iagriculture/js/plugins/dataTables/dataTables.bootstrap.js"></script>
	<script
		src="/iagriculture/js/plugins/dataTables/dataTables.responsive.js"></script>
	<script
		src="/iagriculture/js/plugins/dataTables/dataTables.tableTools.min.js"></script>

	<!-- Custom and plugin javascript -->
	<script src="/iagriculture/js/inspinia.js"></script>
	<script src="/iagriculture/js/plugins/pace/pace.min.js"></script>

	<script src="/iagriculture/js/plugins/sweetalert/sweetalert.min.js"></script>
	<script>
		function alertSuccess() {
			swal({
				title : "Good job!",
				text : "您的操作成功!",
				type : "success"
			});
		}
	</script>
	<!-- Page-Level Scripts -->
	<script>
		$(document).ready(function() {
			//获取所有农场
			getFarm();
			//获取所有设备数据
			getAllDevice();
		});
		//请求农场
		function getFarm() {
			var url = '/iagriculture/farm/all';
			$.ajax({
				url : url,
				//data:sendData,
				type : 'GET',
				dataType : "text",
				success : function(d) {
					var rdata = JSON.parse(d);
					//alert(d);
					if (rdata.code == 0) {
						$('#table-farm').empty();
						$('#dev-state').empty();
						for (var i = 0; i < rdata.data.length; i++) {
							addRowFarm(rdata.data[i]);
							addOptionFarm(rdata.data[i]);
							addDevFarm(rdata.data[i]);
							getDevice(rdata.data[i].farmnum);
						}
					} else {
						alert('请求失败');
					}
				}
			});
		}
		//添加一行农场
		function addRowFarm(farm) {
			var rowfarm = '<tr><td>'
					+ farm.id
					+ '</td>'
					+ '<td>'
					+ farm.farmnum
					+ '</td>'
					+ '<td>'
					+ farm.farmname
					+ '</td>'
					+ '<td>'
					+ farm.model
					+ '</td>'
					+ '<td>'
					+ '<button id="btn_'
					+ farm.id
					+ '" onclick="changeMode(this)" class="btn btn-white btn-sm"><i class="fa fa-exchange"></i>'
					+ '模式切换 </button></td>'
					+ '<td>'
					+ '<button id="btnstate_'
					+ farm.id
					+ '" onclick="checkState(this)" class="btn btn-white btn-sm"><i class="fa fa-circle-o-notch"></i>'
					+ '?线</button></td></tr>';
			$('#table-farm').append(rowfarm);
			$('#btnstate_' + farm.id).click();

		}

		//填充农场
		function addOptionFarm(obj) {
			var rowoptfarm = '<option value="'+obj.id+'">' + obj.farmnum
					+ '</option>'
			$('#select-farm').append(rowoptfarm);
		}

		//填充设备农场
		function addDevFarm(obj) {
			var alldev = '<div class="col-lg-6"><div class="ibox float-e-margins"><div class="ibox-title">'
					+ '<h5>农场号：'
					+ obj.farmnum
					+ '</h5>'
					+ '<div class="ibox-tools"><a class="collapse-link"> <i class="fa fa-chevron-up"></i></a> <a class="close-link"> <i class="fa fa-times"></i></a></div></div>'
					+ '<div class="ibox-content"><table class="table table-hover"><thead><tr><th>#</th><th>设备名</th><th>设备状态</th><th>状态检测</th></tr></thead>'
					+ '<tbody id="devbody_'+obj.farmnum+'"></tbody>'
					+ '</table></div></div></div>';
			$('#dev-state').append(alldev);
		}
		//请求数据
		function getAllDevice() {
			var url = '/iagriculture/device/all';
			$.ajax({
				url : url,
				//data:sendData,
				type : 'GET',
				dataType : "text",
				success : function(d) {
					var rdata = JSON.parse(d);
					//alert(d);
					if (rdata.code == 0) {
						for (var i = 0; i < rdata.data.length; i++) {
							addRowData(rdata.data[i])
						}
					} else {
						alert('请求失败');
					}
				}
			});
		}
		//添加一行数据
		function addRowData(data) {
			$('#editable').dataTable().fnAddData(
					[ data.id, data.farmId, data.devNum ]);
		}

		//datatable单行点击事件
		$(document).on(
				"dblclick",
				"#editable tbody tr",
				function() {
					var index = $(this).context._DT_RowIndex; //行号			
					//alert($('#editable').dataTable().fnGetData(index)[0]);
					swal({
						title : "确定要删除吗?",
						text : "您将删除当前设备!",
						type : "warning",
						showCancelButton : true,
						confirmButtonColor : "#DD6B55",
						confirmButtonText : "是的，删除它!",
						closeOnConfirm : false
					},
							function() {
								deleteDev($('#editable').dataTable().fnGetData(
										index)[0], $('#editable').dataTable()
										.fnGetData(index)[1]);
							});

				});

		//删除数据类型
		function deleteDev(id, farmid) {
			var url = '/iagriculture/device/delete';
			var sendData = {
				'id' : id
			};
			$.ajax({
				url : url,
				data : sendData,
				type : 'POST',
				dataType : "text",
				success : function(d) {
					var rdata = JSON.parse(d);
					//alert(d);
					if (rdata.code == 0) {
						swal("已删除!", "删除成功:)", "success");
						//alert($('#select-farm option[value="'+farmid+'"]').text());
						var fnam = $(
								'#select-farm option[value="' + farmid + '"]')
								.text();
						$('#devbody_' + fnam).empty();
						$('#editable').dataTable().fnClearTable();
						getAllDevice();
						getDevice(fnam);
					} else {
						swal("失败", "删除失败:(", "error");
					}
				}

			});
		}

		//切换模式
		function changeMode(obj) {
			var url = '/iagriculture/farm/model';
			var fid = obj.id.split('_');
			//alert(fid[1]);
			var sendData = {
				'id' : fid[1]
			};
			$.ajax({
				url : url,
				data : sendData,
				type : 'POST',
				dataType : "text",
				success : function(d) {
					var rdata = JSON.parse(d);
					//alert(d);
					if (rdata.code == 0) {
						$('#table-farm').empty();
						getFarm();
						swal("成功!", "模式切换:)", "success");
					} else {
						swal("失败", "设备未连接:(", "error");
					}
				}
			});
		}

		//农场在线状态检测
		function checkState(obj) {
			var url = '/iagriculture/farm/state';
			var fid = obj.id.split('_');
			var sendData = {
				'id' : fid[1]
			};
			$.ajax({
				url : url,
				data : sendData,
				type : 'POST',
				dataType : "text",
				success : function(d) {
					var rdata = JSON.parse(d);
					//alert(d);
					if (rdata.code == 0) {
						obj.innerHTML = '在线';
					} else {
						obj.innerHTML = '离线';
					}
				}
			});
		}

		//设备在线状态检测
		function checkDevState(obj) {
			var url = '/iagriculture/device/state';
			var fid = obj.id.split('_');
			var sendData = {
				'farmNum' : fid[1],
				'devNum' : fid[2],
				'devtype' : '01'
			};
			$.ajax({
				url : url,
				data : sendData,
				type : 'POST',
				dataType : "text",
				success : function(d) {
					var rdata = JSON.parse(d);
					//alert(d);
					if (rdata.code == 0) {
						if (rdata.data.devstate == 0) {
							$('#kg_' + fid[1] + '_' + fid[2]).html('关');
						} else {
							$('#kg_' + fid[1] + '_' + fid[2]).html('开');
						}

					} else {
						obj.innerHTML = '离线';
					}
				}
			});
		}

		//添加农场
		$('#btn-save-dev').click(
				function() {
					var url = '/iagriculture/device/add';
					var sendData = {
						'farmId' : $('#select-farm').val(),
						'devNum' : $('#input-add-devNum').val()
					};
					$.ajax({
						url : url,
						data : sendData,
						type : 'POST',
						dataType : "text",
						success : function(d) {
							var rdata = JSON.parse(d);
							//alert(d);
							if (rdata.code == 0) {
								swal("成功!", "添加:)", "success");
								$('#myModal-dev').modal('hide');
								$('#editable').dataTable().fnClearTable();
								$(
										'#devbody_'
												+ $('#select-farm').find(
														'option:selected')
														.text()).empty();
								getAllDevice();
								getDevice($('#select-farm').find(
										'option:selected').text());
							} else {
								swal("失败", "该设备已经存在:(", "error");
							}
						}
					});
				});

		//data表个控制
		$(document)
				.ready(
						function() {
							$('.dataTables-example')
									.DataTable(
											{
												"dom" : 'lTfigt',
												"tableTools" : {
													"sSwfPath" : "js/plugins/dataTables/swf/copy_csv_xls_pdf.swf"
												}
											});

							/* Init DataTables */
							var oTable = $('#editable').dataTable({
								'sPaginationType' : 'full_numbers'
							});

						});

		//刷新按钮
		$(document).ready(function() {

			$('#loading-example-btn').click(function() {
				btn = $(this);
				simpleLoad(btn, true)

				simpleLoad(btn, false)
			});
		});

		function simpleLoad(btn, state) {
			if (state) {
				btn.children().addClass('fa-spin');
				btn.contents().last().replaceWith(" Loading");
				$('#editable').dataTable().fnClearTable(); //清空一下table
				$('#editable').dataTable().fnDestroy(); //还原初始化了的datatable
				getDevice();
			} else {
				setTimeout(function() {
					btn.children().removeClass('fa-spin');
					btn.contents().last().replaceWith("刷新");
				}, 2000);
			}
		}

		//通过农场获取设备
		function getDevice(farmNum) {
			//alert(farmNum);
			var url = '/iagriculture/device/farmid';
			var sendData = {
				'farmNum' : farmNum
			};
			$.ajax({
				url : url,
				data : sendData,
				type : 'POST',
				dataType : "text",
				success : function(d) {
					var rdata = JSON.parse(d);
					//alert(d);
					if (rdata.code == 0) {
						for (var i = 0; i < rdata.data.length; i++) {
							addFarmToDev(rdata.data[i], farmNum);
						}
					} else {
						alert('请求失败');
					}

				}
			});
		}

		function addFarmToDev(obj, farmNum) {
			var state = "";
			//alert(obj.devState);
			if (obj.devstate == 0) {
				state = "关"
			} else {
				state = "开"
			}
			var alldev = '<tr><td>'
					+ obj.id
					+ '</td><td>'
					+ obj.devNum
					+ '</td><td id="kg_'+farmNum+'_'+obj.devNum+'">'
					+ state
					+ '</td><td>'
					+ '<button id="btndevstate_'
					+ farmNum
					+ '_'
					+ obj.devNum
					+ '"'
					+ ' onclick="checkDevState(this)" class="btn btn-white btn-sm">检测</button></td></tr>';
			$('#devbody_' + farmNum).append(alldev);
			$('#btndevstate_' + farmNum).click();
		}
	</script>


</body>

</html>
